import React, { CSSProperties, ReactNode } from 'react'
import style from './style.module.scss'

interface PageContainerProps {
    readonly style?: CSSProperties;
    readonly shadow?: boolean;
    readonly children?: ReactNode;
    readonly header?: ReactNode;
    readonly footer?: ReactNode;
}

interface PageContainerState {

}

export class PageContainer extends React.Component<PageContainerProps, PageContainerState> {
    defaultShadowStyle: CSSProperties = {
        WebkitBoxShadow: '#e4e4e4 1px 1px 8px'
    }

    getContainerStyle = () => {
        if (this.props.style === undefined && this.props.shadow === undefined) {
            return undefined
        }
        const result: CSSProperties = this.props.style || {}
        if (this.props.shadow) {
            result.WebkitBoxShadow = this.defaultShadowStyle.WebkitBoxShadow
        }
        return result
    }

    render (): ReactNode {
        return (
            <div style={this.getContainerStyle()} className={style.defaultContainer}>
                {this.props.header}
                <div className={style.containerBody}>
                    {this.props.children}
                </div>
                {this.props.footer}
            </div>
        )
    }
}
